<template>
  <div class="dashboard">
    <Header>
      <template v-slot:left>
        <div>
          <div class="title">泰州数据园区可视化管理平台</div>
          <div class="subtitle">taizhou Visual Management Platform</div>
        </div>
      </template>
      <template v-slot:right>
        <div class="state">
          <Calendar></Calendar>
          <div class="divider"></div>
          <Weather></Weather>
        </div>
      </template>
    </Header>
    <div class="main">
      <div class="left">
        <div class="mask-left"></div>
        <template v-for="item in page.leftComps">
          <component :is="item" class="animate__animated animate__backInLeft"></component>
        </template>
      </div>
      <div class="right">
        <div class="mask-right"></div>
        <template v-for="item in page.rightComps">
          <component :is="item" class="animate__animated animate__backInRight"></component>
        </template>
      </div>
    </div>
    <NavMenu :menus="menus" @change="onMenuChange"></NavMenu>
  </div>
</template>

<script lang="ts" setup>
import AlarmPanel from "./components/AlarmPanel/index.vue";
import DevicePanel from "./components/DevicePanel/index.vue";
import DeviceMonitor from "./components/DevicePanel/DeviceMonitor.vue";
import News from "./components/DevicePanel/News.vue";
import EnvironmentPanel from "./components/EnvironmentPanel/index.vue";
import WorkPanel from "./components/WorkPanel/index.vue";
import EnergyPanel from "./components/EnergyPanel/index.vue";
import PlacePanel from "./components/PlacePanel/index.vue";
import VisitorPanel from "./components/VisitorPanel/index.vue";

import EnergyDeviceAnalysis from "./components/EnergyPanel/EnergyDeviceAnalysis.vue";
import EnergyAnalysis from "./components/EnergyPanel/EnergyAnalysis.vue";

import NavMenu from "@/components/NavMenu/index.vue";

import Access from "./components/DevicePanel/Access.vue";
import Light from "./components/DevicePanel/Light.vue";

import Contacts from "./components/ContactsPanel/index.vue";

import VisitorAnalysis from "./components/VisitorPanel/VisitorAnalysis.vue";
import Monitor from "./components/DevicePanel/Monitor.vue";

import AlarmAnalysis from "./components/AlarmPanel/AlarmAnalysis.vue";

import Building from "./components/BuildingPanel/index.vue";
import Floor from "./components/BuildingPanel/Floor.vue";


const page = ref();

const menus = ref([
  {
    name: "首页",
    key: "1",
    active: true,
    leftComps: [markRaw(AlarmPanel), markRaw(WorkPanel), markRaw(DevicePanel)],
    rightComps: [markRaw(EnvironmentPanel), markRaw(EnergyPanel), markRaw(PlacePanel), markRaw(VisitorPanel)],
  },
  { name: "视频监控", key: "2", leftComps: [markRaw(DeviceMonitor)] },
  { name: "信息发布", key: "3", leftComps: [markRaw(News)], rightComps: [markRaw(DevicePanel)] },
  { name: "能耗管理", key: "4", leftComps: [markRaw(EnergyDeviceAnalysis)], rightComps: [markRaw(EnergyAnalysis)] },
  { name: "门禁照明", key: "6", leftComps: [markRaw(Access)], rightComps: [markRaw(Light)] },
  { name: "无线对讲", key: "8", leftComps: [markRaw(Contacts)], rightComps: [] },
  { name: "访客管理", key: "9", leftComps: [markRaw(VisitorAnalysis)], rightComps: [markRaw(Monitor)] },
  { name: "安防报警", key: "10", leftComps: [markRaw(AlarmPanel)], rightComps: [markRaw(AlarmAnalysis),markRaw(DevicePanel)] },
  { name: "访客引导", key: "11", leftComps: [markRaw(Building),markRaw(VisitorPanel)], rightComps: [markRaw(Floor)] },
]);
page.value = menus.value[0];
function onMenuChange(item) {
  page.value = item;
}
</script>
<style lang="scss" scoped>
.dashboard {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 18px;
  text-shadow: 0px 5.27px 9.41px #2a68d747;
}
.subtitle {
  font-size: 12px;
}
.state {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.divider {
  height: 22px;
  width: 2px;
  background-color: #fff;
  margin: 0px 12px;
}

.main {
  position: relative;
  padding: 85px 0px;
  flex: 1;

  @mixin box {
    width: 475px;
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .left {
    @include box;
    float: left;
    top: 0;
    left: 0;
  }
  .right {
    @include box;
    float: right;
    top: 0;
    right: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: end;
  }
  @mixin mask {
    @include box;
    position: absolute;
    z-index: -1;
    top: 0px;
  }

  .mask-left {
    @include mask;
    left: 0;
    background: linear-gradient(90deg, #020f37 0%, rgba(2, 15, 55, 0.8) 19.79%, rgba(2, 15, 55, 0.6) 47.92%, rgba(2, 15, 55, 0) 100%);
  }
  .mask-right {
    @include mask;
    right: 0;
    background: linear-gradient(270deg, #020f37 0%, rgba(2, 15, 55, 0.8) 19.79%, rgba(2, 15, 55, 0.6) 47.92%, rgba(2, 15, 55, 0) 100%);
  }
}
</style>
